<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="less/1.css"/>
	</head>
	<body>
		<div class="app">
			<div class="top" @click="cc" >
				<img :src="list" alt="" />
				<div class="h-left">
				    <span class="glyphicon glyphicon-menu-left" @click = "bac"></span>
			    </div>
			    <p class="name">{{title}}</p>
			    <div class="cont" >
			    	{{cont.length}}
			    </div>
			</div>
			<div class="bottom">
				 <div v-for="(v,i) in pel" @click.stop="show" >
				 	<p><span class="glyphicon glyphicon-heart"></span>
				 		{{v.title}}</p>
				 	<div v-show="sta" v-for="(v,i) in v.children" @click.stop="shows">
				 		<p id="p"><span class="glyphicon glyphicon-heart"></span>
				 			{{v.title}}</p>
				 		<div v-for="(v,i) in v.children" v-show="stas">
				 			<p id="pp"><span class="glyphicon glyphicon-heart"></span>
				 				{{v.title}}</p>
				 		</div>
				 	</div>
				 </div>
			</div>
			
		</div>
		<script src="js/flexible.debug.js"></script>
		<script src="js/flexible_css.debug.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/jquery.min.js"></script>
		<script>
			var vue1 = new Vue({
				el:".app",
				data:{
					list:"",
					title:"",
					cont:"",
					pel:"",
					sta:false,
					stas:false
				},
				methods:{
					bac:function(){
						history.back()
					},
					cc:function(){
						sessionStorage.count =JSON.stringify(this.cont) ;
                        location.href = "pic.html"
					},
					show:function(){
						if(!this.sta){
						  this.sta = true;
						}else{
						  this.sta = false;
						}
						
					},
					shows:function(){
						if(!this.stas){
						  this.stas = true;
						}else{
						  this.stas = false;
						}
					}
				},
				mounted(){
					
					$.ajax({
						type:"get",
						url:"json/detail.json",
						success:(res)=>{
							this.list = res.data.bannerImg;
							this.title= res.data.sightName;
							this.cont = res.data.gallaryImgs
                            this.pel = res.data.categoryList
						}
					})
				}
			})
			
		</script>
	</body>
</html>
